<template>
  <div>
    <el-table :data="orderDetails">
      <el-table-column width="50" label="编号" prop="no"></el-table-column>
      <el-table-column width="120" label="图片" prop="produceIcon">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px; border: 1px solid #cccccc"
            :src="scope.row.produceIcon"
            fit="contain"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column width="200" label="名称" prop="produceName"></el-table-column>
      <el-table-column width="120" label="单价" prop="producePrice"></el-table-column>
      <el-table-column width="120" label="数量" prop="produceQuantity"></el-table-column>
      <el-table-column label="产品ID" prop="produceId"></el-table-column>
    </el-table>
    <br />
    <br />

    <div>
      <div style="width: 100px; height: 100px">
        <el-image
          style="width: 80px; height: 80px; border: 1px solid #cccccc"
          :src="storeIcon"
          fit="contain"
          align="center"
        ></el-image>
      </div>
      <span class="tip">店铺名：</span>
      <span class="content">{{storeName}}</span>
    </div>
    <br />

    <span class="tip">订单号：</span>
    <span class="content">{{order.orderId}}</span>
    <br />
    <br />

    <span class="tip">收货人：</span>
    <span class="content">{{order.buyerName}}</span>
    <br />
    <br />

    <span class="tip">手机号：</span>
    <span class="content">{{order.buyerPhone}}</span>
    <br />
    <br />

    <span class="tip">收货地址：</span>
    <span class="content">{{order.buyerAddress}}</span>
    <br />
    <br />

    <span class="tip">总金额：</span>
    <span class="content">{{order.orderAmount}}</span>
    <br />
    <br />

    <span class="tip">订单状况：</span>
    <span class="content">{{order.orderStatus}}</span>
    <br />
    <br />

    <span class="tip">支付状况：</span>
    <span class="content">{{order.payStatus}}</span>
    <br />
    <br />

    <span class="tip">支付时间：</span>
    <span class="content">{{order.payTime}}</span>
    <br />
    <br />

    <span class="tip">发货时间：</span>
    <span class="content">{{order.sentTime}}</span>
    <br />
    <br />

    <span class="tip">签收时间：</span>
    <span class="content">{{order.arrivedTime}}</span>
    <br />
    <br />

    <span class="tip">完成时间：</span>
    <span class="content">{{order.finishTime}}</span>
    <br />
    <br />

    <el-button type="primary" @click="back()">返回</el-button>
    <el-button type="danger" plain v-show="cancelShow" @click="cancelHandle()">{{cancelName}}</el-button>
  </div>
</template>

<script>
import OrderTable from "@/components/UserCenter/OrderTable";

export default {
  name: "OrderDetail",
  data() {
    return {
      storeName: "",
      storeIcon: "",
      order: {},
      orderDetails: [],
      cancelName: "",
      cancelShow: 0,
      cancelType: 0,

      //   orderId: 0,
      //   storeName: "这是店铺名啊啊啊啊啊啊阿 ",
      //   storeIcon:
      //     "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3283020267,2041185192&fm=26&gp=0.jpg",
      //   buyerName: "xxx",
      //   buyerPhone: "123",
      //   buyerAddress: "xxx",
      //   orderAmount: 123,
      //   payStatus: "已支付 " + "2020-09-03",
      //   orderStatus: "未完成",
      //   sentTime: "2020-09-03",
      //   arrivedTime: "2020-09-03",
      //   finishTime: "2020-09-03",
    };
  },
  methods: {
    init(order) {
      var url;

      console.log(order);

      this.order = order;

      switch (this.order.orderStatus) {
        case "未完成":
          this.cancelName = "申请退款";
          this.cancelShow = 0;
          this.cancelType = 1;
          break;
        case "已完成":
          this.cancelName = "删除记录";
          this.cancelShow = 1;
          this.cancelType = 2;
          break;
        case "退款中":
          this.cancelName = "取消退款";
          this.cancelShow = 0;
          this.cancelType = 3;
          break;
        case "已退款":
          this.cancelName = "删除记录";
          this.cancelShow = 1;
          this.cancelType = 4;
          break;
        default:
          this.cancelName = "上报错误";
          this.cancelShow = 1;
          this.cancelType = 5;
          break;
      }

      // 查店铺名和封面图
      url =
        process.env.URL_HEAD + "/api/store/store/info/" + this.order.storeId;
      this.$http.get(url).then(
        (response) => {
          if (response.data.store != null) {
            console.log(response);
            //   console.log(response.data.store.storeName);

            this.storeIcon = response.data.store.storeIcon;
            this.storeName = response.data.store.storeName;

            // console.log(this.order);

            console.log("initOrderDetail ok");
          } else {
            this.storeIcon = "";
            this.storeName = "";

            console.log("find nothing");
          }
        },
        (response) => {
          this.storeIcon = "";
          this.storeName = "";
          console.log("initOrderDetail error");
        }
      );

      // 查订单详情
      url = process.env.URL_HEAD + "/search/search/order/orderdetail/accurate";
      this.$http
        .get(url, {
          params: { key: "orderId", value: this.order.orderId },
        })
        .then(
          (response) => {
            if (response.data.accurate.list != null) {
              //   console.log(response.data.accurate.list);
              var details = response.data.accurate.list;

              for (var i = 0; i < details.length; i++) details[i].no = i + 1;

              this.orderDetails = details;
            } else {
              this.orderDetails = [];
              console.log("error");
            }
          },
          (response) => {
            this.orderDetails = [];
            console.log("initOrderDetail error");
          }
        );
    },
    cancelHandle() {
      switch (this.cancelType) {
        case 2:
        case 4:
          this.$confirm("确定删除?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              var url = process.env.URL_HEAD + "/api/order/order/delete";

              console.log(this.order.orderId);

              this.$http.post(url, [this.order.orderId]).then(
                (response) => {
                  if (response.data.msg == "success") {
                    this.backAndReload();
                    this.$message.success("删除成功！");
                  } else {
                    this.$message.error("删除失败");
                  }
                },
                (response) => {
                  this.$message.error("系统异常，请重试");
                }
              );
            })
            .catch(() => {
              this.$message.info("已取消");
            });

          break;
      }
    },
    back() {
      this.order = {};
      this.orderDetails = [];
      this.$emit("back");
    },
    backAndReload() {
      this.order = {};
      this.orderDetails = [];
      this.$emit("backAndReload");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-input {
  width: 200px;
}

.tip {
  font-size: 16px;
}

.content {
  font-size: 16px;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
